<template>
  <div class="log-wrapper">
    <div class="flex-center mt24 mb28">
      <div class="flex-center-between mh24">
        <div class="flex-center">
          <div class="bag-6a66f6-radius-2px" style="width: 4px; height: 16px; margin-right: 12px"></div>
          <span class="font-16px-3x3d43">员工操作日志</span>
        </div>
        <div style="display: flex">
          <a-date-picker v-model="logDate" format="YYYY-MM-DD" />
          <a-input v-model="logName" style="width: 200px; margin-left: 24px" placeholder="请输入员工姓名" />
        </div>
      </div>
    </div>
    <div v-if="logListData && logListData.length > 0" style="max-height: 300px; overflow: auto; margin-bottom: 35px">
      <div class="log-list" v-for="(item, index) in logListData" :key="index">
        <div class="item-circular mt8"></div>
        <div class="item ml16">
          <div class="flex-center">
            <span class="font-14px-55565D">{{ moment(item.gmtCreate).format("MM-DD HH:mm") }}</span
            >,
            <span class="font-14px-55565D" style="margin-left: 12px">{{ item.contentId ? item.contentId : "" }}</span>
          </div>

          <span class="font-14px-767885 mt12">
            <span class="font-14px-55565D">{{ item.userName }} </span>{{ item.content }}
          </span>
        </div>
      </div>

      <div class="bottom-pagination">
        <a-pagination
          show-size-changer
          v-model="current"
          :default-current="1"
          :total="entityCount"
          :pageSize="pageSize"
          :pageSizeOptions="['10', '20', '50', '100']"
          @showSizeChange="onShowSizeChange"
          @change="onChange"
        />
      </div>
    </div>
    <a-empty v-else />
  </div>
</template>

<script>
import { selectServiceLog } from "../api";
import moment from "moment";
import { parseTime } from "@/utils/index";
export default {
  props: ["siteId"],
  data() {
    return {
      parseTime,
      logDate: moment(),
      logListData: [],
      logName: undefined,
      pageSize: 10,
      current: 1,
      entityCount: 0
    };
  },
  watch: {
    logDate(val) {
      this.selectServiceLog({ userName: this.logName });
    },
    logName(val) {
      this.current = 1;
      this.selectServiceLog({ userName: val });
    },
    siteId(newValue) {
      this.logName = undefined;
      this.pageSize = 10;
      this.current = 1;
      this.selectServiceLog();
      // console.log("debug log --> newValue", newValue);
    }
  },
  created() {
    this.selectServiceLog();
  },
  methods: {
    moment,
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    selectServiceLog(data) {
      var pr = {
        ...data,
        pageNo: this.current,
        pageSize: this.pageSize
      };
      if (this.logDate) {
        pr.gmtCreateStart = moment(this.logDate).format("YYYY-MM-DD") + " 00:00:00";
        pr.gmtCreateEnd = moment(this.logDate).format("YYYY-MM-DD") + " 23:59:59";
      }
      if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
        pr.companyStr = this.siteId;
      }
      selectServiceLog(pr)
        .then((res) => {
          this.logListData = res.data.entities;
          this.entityCount = res.data.entityCount;
          if (res.data.entities) {
            this.current = res.data.pageNo === 0 ? 1 : res.data.pageNo;
            this.pageSize = res.data.pageSize;
          } else {
            this.current = 1;
            this.pageSize = 10;
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = 1;
      this.selectServiceLog({ userName: this.logName });
    },
    onChange(current, pageSize) {
      this.pageSize = pageSize;
      this.current = current;
      this.selectServiceLog({ userName: this.logName });
    }
  }
};
</script>

<style lang="scss" scoped>
.log-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  .bag-6a66f6-radius-2px {
    background: var(--primary);
    border-radius: 2px;
  }
  .log-list {
    display: flex;
    background: #f4f6fa;
    border-radius: 4px;
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 16px 24px;
    .item-circular {
      width: 8px;
      height: 8px;
      background: var(--primary);
      border-radius: 8px;
    }
    .item {
      display: flex;
      flex-direction: column;
    }
  }

  .bottom-pagination {
    position: absolute;
    bottom: 0;
    right: 25px;
  }

  .font-16px-3x3d43 {
    font-size: 16px;
    font-weight: 500;
    color: #3c3d43;
    line-height: 24px;
  }
  .font-14px-55565D {
    font-size: 14px;
    font-weight: 500;
    color: #55565d;
    line-height: 21px;
  }
  .font-14px-767885 {
    font-size: 14px;
    font-weight: 400;
    color: #767885;
    line-height: 21px;
  }
}
</style>
